<!DOCTYPE html>
<html lang="en" class="app" xmlns:th="http://www.thymeleaf.org">
<head>  
  <meta charset="utf-8" />
  <title>Musik | Web Application</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

</head>
<body class="">



    <section th:fragment="index" th:class="${panduan}==1?'scrollable padder-lg w-f-md':''" th:id="${panduan}==1?'ajaxContent':''" >
<!--                    <a href="#" class="" data-toggle="class:fa-spin" ><i class="icon-refresh i-lg  inline" id="refresh"></i></a>-->
                    <h2 class="font-thin m-b">Discover <span class="musicbar animate inline m-l-sm" style="width:20px;height:20px">
                    <span class="bar1 a1 bg-primary lter"></span>
                    <span class="bar2 a2 bg-info lt"></span>
                    <span class="bar3 a3 bg-success"></span>
                    <span class="bar4 a4 bg-warning dk"></span>
                    <span class="bar5 a5 bg-danger dker"></span>
                  </span></h2>
                  <div class="row row-sm">
                    <div th:each="musicBean:${musicBeanList}" class="col-xs-6 col-sm-4 col-md-3 col-lg-2" >
                      <div class="item">
                        <div class="pos-rlt">
                          <div class="item-overlay opacity r r-2x bg-black ">

                            <div class="center text-center m-t-n">
                              <a href="#" class="audio" >

                                <audio th:src="@{${musicBean.music_path}}" ></audio>
                                <i class="icon-control-play i-2x text"></i>

                              </a>
                            </div>
                            <div class="bottom padder m-b-sm">
                              <a href="#" class="addSongSinger" data-toggle="class">
                                <i th:class="${musicBean.userBroadcast}?'fa fa-plus-circle text-active':'fa fa-plus-circle text'" ></i>
                                <i th:class="${musicBean.userBroadcast}?'fa fa-check-circle text-info text':'fa fa-check-circle text-info text-active'" ></i>
                              </a>
                            </div>
                          </div>
                          <a href="#"><img th:src="@{${musicBean.image}}" alt="" class="r r-2x img-full"></a>
                        </div>
                        <div class="padder-v">
                          <a href="#" class="text-ellipsis feiAdd">[[${musicBean.song_title}]]</a>
                          <a href="javascript:;" th:onclick="ajaxRequest('/user/ajax/singer?name='+[[${musicBean.singerBean.name}]])" class="text-ellipsis text-xs text-muted">[[${musicBean.singerBean.name}]]</a>
                        </div>
                      </div>
                    </div>

                  </div>

                </section>



  <script type="text/javascript" src="/js/audio-fei.js"></script>
</body>
</html>